<template>
  <div class="item-box">
    <!-- <h3 class="text-color mrtb15 text-shadow">处理状况：</h3> -->
    <h3 class="text-color mrtb15" v-if="orderType != 0">
      处理状况：
    </h3>
    <el-steps
      direction="vertical"
      :active="activeValue"
      finish-status="success"
    >
      <el-step v-for="(item, index) in workAll" :key="index">
        <template slot="title">
          <h3>
            【状态-{{ item.workStateName || item.yewuStateName }}】{{
              Number(item.workState) == 1 ? "已完成" : "未完成"
            }}
          </h3>
          <p>处理人账号：{{ item.dealUser }}</p>
          <p>处理人姓名：{{ item.customName || "暂无姓名" }}</p>
          <p>开始时间：{{ item.createTime }}</p>
          <p v-if="item.endTime">结束时间：{{ item.endTime }}</p>
        </template>

        <template slot="description">
          <slot
            name="work-state"
            :row="item"
            v-if="Number(item.workState) == 0"
          />
          <div v-if="item.detailList && item.detailList.length">
            <form-create
              v-model="editFormInstance"
              :value="getFormData(item.detailList, item.workState)"
              :rule="toForm(item.detailList, true)"
              :option="editOptions"
            />
          </div>
          <div v-else>
            <div v-if="index == workAll.length - 1">
              <slot />
            </div>
          </div>
        </template>
      </el-step>
    </el-steps>
  </div>
</template>
<script>
import { editFormOptions } from "@/formRules";
import { toForm, getFormData } from "@/utils/getFormData";
export default {
  data() {
    return {
      editFormInstance: {},
      editOptions: editFormOptions(),
      toForm: toForm
    };
  },
  computed: {
    activeValue() {
      let length = this.workAll.length - 1;
      if (Number(this.orderType) === 3 || Number(this.orderType) === 7) {
        length = this.workAll.length;
      }
      return length;
    },
    getRuleData: function() {
      return (list, state) => {
        return getFormData(list, state);
      };
    }
  },
  methods: {
    getFormData(item, status) {
      let data = {};
      if (item && item.length) {
        item.forEach(e => {
          if (Number(status) == 1) {
            e.disabled = true;
          }
          if (e.keyId) {
            if (e.type == "FormListImageFile" || e.type == "FormFileList") {
              let fileVal = JSON.parse(e.val);
              if (!fileVal) {
                return;
              }
              data[e.keyId] = fileVal;
              this.$nextTick(() => {
                this.editFormInstance.updateRule(e.keyId, {
                  value: fileVal
                });
              });
            } else {
              data[e.keyId] = JSON.parse(e.val)[0];
              this.$nextTick(() => {
                this.editFormInstance.updateRule(e.keyId, {
                  value: JSON.parse(e.val)[0]
                });
              });
            }
          } else {
            data[e.keyId] = e.val;
            this.$nextTick(() => {
              this.editFormInstance.updateRule(e.keyId, {
                value: e.val
              });
            });
          }
        });
      } else {
        data = {};
      }

      return data;
    }
  },
  mounted() {},
  props: {
    workAll: {
      type: Array,
      default: () => {
        return [];
      }
    },
    orderType: {
      type: Number
    }
  }
};
</script>
